<template>
	<div>
		<van-tabs>
			<van-tab title="在售">
				<van-tabs>
					<van-tab v-for="(v, i) in online_list" :key="i" :title="v.category_name">
						<div v-for="(v, i) in v.series_list" :key="i">
							<dl v-if="v.type === '1002'">
								<dt>
									<img :src="v.info.image_url" />
								</dt>
								<dd>
									<h3>{{ v.info.series_name }}</h3>
									<p>{{ v.info.price }}</p>
									<p>{{ v.info.official_price_prefix }}: {{ v.info.official_price }}</p>
								</dd>
								<dd>
									<van-button type="primary">询底价</van-button>
								</dd>
							</dl>
							<h3 v-else>{{ v.info.sub_brand_name }}</h3>
						</div>
					</van-tab>
				</van-tabs>
			</van-tab>
			<van-tab title="未售/停售">
					<van-tabs>
					<van-tab v-for="(v, i) in excluded_online_list" :key="i" :title="v.category_name">
						<div v-for="(v, i) in v.series_list" :key="i">
							<dl v-if="v.type === '1002'">
								<dt>
									<img :src="v.info.image_url" />
								</dt>
								<dd>
									<h3>{{ v.info.series_name }}</h3>
									<p>{{ v.info.price }}</p>
									<p>{{ v.info.official_price_prefix }}: {{ v.info.official_price }}</p>
								</dd>
								<dd>
									<van-button type="primary">询底价</van-button>
								</dd>
							</dl>
							<h3 v-else>{{ v.info.sub_brand_name }}</h3>
						</div>
					</van-tab>
				</van-tabs>
			</van-tab>
		</van-tabs>
	</div>
</template>


<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { fetchCarDetail } from '@/api'
import { onMounted, ref } from 'vue';
const route = useRoute()
const id = +route.params.id

const online_list = ref<any[]>([])
const excluded_online_list = ref<any[]>([])

onMounted(() => {
	fetchCarDetail({ brand_id: id, device_id: 0, city_name: '上海' }).then((resp) => {
		console.log(resp.data);
		online_list.value = resp.data.data.online_list
		excluded_online_list.value = resp.data.data.excluded_online_list
	}).catch((error) => {
		console.log('请求被拒绝');
		console.log(error);

	})
})


</script>


<style scoped lang="scss">
dl {
	display: flex;
	dt {
		img {
			width: 120px;
		}
	}
	dd {
		&:nth-child(2) {
			flex: 1;
		}
	}
}
</style>